<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <h3>作业：</h3>
  <ol>
    <li>完成addUser和index页面的所有功能（前端和后端）</li>
    <li>完善addUser和index页面之间的交互效果</li>
    <li>延展：尝试删除单条</li>
    <li>延展：修改单条功能</li>
    <li>延展：排序功能</li>
    <li>延展：搜索功能</li>
  </ol>

  <input type="text" class="search"><input type="button" value="搜索">

  <table width="800" align="center" border="1">
    <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>手机号</th>
        <th>邮箱</th>
        <th>权限</th>
        <th>爱好</th>
        <th>是否VIP</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</body>
<script src="./ajax.js"></script>
<script>

  const tbody = document.querySelector("tbody");

  ajax({
    url:"http://localhost:3000/getuser"
  }).then(res=>{
    res = JSON.parse(res);
    let str = ""
    res.forEach((val,idx)=>{
      str += `<tr>
        <td>${idx+1}</td>
        <td>${val.username}</td>
        <td>${val.password}</td>
        <td>${val.tel}</td>
        <td>${val.email}</td>
        <td>${ powerToText( val.power ) }</td>
        <td>${val.hobby}</td>
        <td>${val.isVIP ? "是" : "否"}</td>
        <td>
          <input type="button" value="删除">
          <input type="button" value="修改">
        </td>
      </tr>`
    })
    tbody.innerHTML = str;
  }).catch(res=>{
    console.log(res);
  });



  function powerToText(power){
    switch(power){
      case 0:return "超级管理员";
      case 1:return "管理员";
      case 2:return "用户";
      case 3:return "游客";
    }
  }
</script>
</html>